<template>
  <div id="panel">
    <div class="header" v-show="showTitle">
      <div class="title">
        {{ title }}
      </div>
      <i class="iconfont icon-close"></i>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 's-panel',
  props: {
    title: {
      required: true,
      type: String,
      default: '面板',
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
  },
  setup() {
    return {};
  },
});

</script>

<style scoped lang="scss">
#panel {
  min-width: 200px;
  min-height: 100px;
  margin: 1px;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    flex-direction: row;
    background-color: #d3d6d9;
    border: 1px solid gray;
    border-bottom: transparent;
    justify-content: center;
    align-items: center;

    .title {
      flex: 1;
      margin-left: 5px;
      user-select: none;
      text-align: left;
    }

    .close {
      cursor: pointer;
    }
  }

  .content {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex: 1;
    border: 1px solid gray;
    border-radius: 1px;
    box-sizing: border-box;
  }
}
</style>
